<template>
  <div class="home">
    <!-- 头部 -->
    <div class="header">
        <div class="logo">
            <img src="../assets/imgs/logo.jpg" alt="">
        </div>
        <router-link tag="div" to="/search" class="inp">
            <div class="fdj">
                <img src="../assets/imgs/放大镜.png" alt="">
            </div>
            <div class="wenzi">搜索你爱的</div>
        </router-link>
        <router-link tag="div" to="/myspace" class="booklist">
            <div class="imgs">
                <img src="../assets/imgs/书架.png" alt="">
            </div>
            <div class="wenzi">
                书架
            </div>
        </router-link>
    </div>
    <!-- 切换 -->
    <div class="tabs">
        <div class="faxian">发现</div>
        <router-link tag="div" to="/rec" class="tuijian">推荐</router-link>
        <router-link tag="div" to="/world" class="shijie">世界</router-link>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item class="item"> <img src="../assets/轮播图/01.png" alt=""> </van-swipe-item>
          <van-swipe-item class="item"> <img src="../assets/轮播图/02.png" alt=""> </van-swipe-item>
          <van-swipe-item class="item"> <img src="../assets/轮播图/03.png" alt=""> </van-swipe-item>
        </van-swipe>
    </div>
    <!-- 帮助 -->
    <div class="help">
        <router-link tag="div" to="/sele" class="one">
            <div class="imgs">
                <img src="../assets/imgs/作品分类.png" alt="">
            </div>
            <div class="wenzi">
                作品分类
            </div>
        </router-link>
        <router-link tag="div" to="/toplist" class="two">
            <div class="imgs">
            <img src="../assets/imgs/作品排行.png" alt="">
            </div>
            <div class="wenzi">
                作品排行
            </div>
        </router-link>
        <router-link tag="div" to="/kkb" class="three">
            <div class="imgs">
            <img src="../assets/imgs/kk福袋.png" alt=""></div>
            <div class="wenzi">
                kk福袋
            </div>
        </router-link>
    </div>
    <!-- 为你推荐 -->
    <div class="weinituijian">
        <div class="foryou">
        <div class="h1">为你推荐</div>
        <div class="body">
            <router-link tag="div" :to="'/show?id='+item.id" class="item" v-for="(item,index) in bianli" :key="index">
                <div class="imgs">
                    <img :src="item.fmimg" alt="">
                </div>
                <div class="wenzi">
                    <div class="one">{{item.fmname}}</div>
                    <div class="two">{{item.fmbq}}</div>
                </div>
            </router-link>
        </div>
    </div>
    <div class="cando">
        <router-link tag="div" to="/checkmore" class="more">查看更多</router-link>
        <div class="change" @click="huan">换一批</div>
    </div>
    </div>

    <!-- 入站精选必看 -->
    <div class="weinituijian">
        <div class="foryou">
        <div class="h1">入站精选必看</div>
        <div class="body">
            <router-link tag="div" to="/show" class="item" v-for="(item,index) in homeman" :key="index">
                <div class="imgs">
                    <img :src="item.fmimg" alt="">
                </div>
                <div class="wenzi">
                    <div class="one">{{item.fmname}}</div>
                    <div class="two">{{item.fmbq}}</div>
                </div>
            </router-link>
        </div>
    </div>
    <div class="cando">
        <div class="more">查看更多</div>
        <div class="change">换一批</div>
    </div>
    </div>

    <!-- 日漫榜单 -->
    <div class="riman">
        <div class="header">
            <div class="left">
                <div :class="['one',qiehuan==1?'con':'']" @click="qiehuan1">日漫榜</div>
                <div :class="['two',qiehuan==2?'con':'']" @click="qiehuan2">飙升榜</div>
            </div>
            <div class="right">
                更多&gt;
            </div>
        </div>
        <div class="body">
            <div class="item" v-for="(item,index) in bianli2" :key="index">
                <div class="imgs">
                    <img :src="item.rimanimg" alt="">
                </div>
                <div class="yi">{{item.rimanname}}</div>
                <div class="er">---{{item.rimanpai}}</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { getHomeData } from "../api/booklists"
export default {
    data(){
        return{
            bianli:null,
            homeman:null,
            homeman2:null,
            riman:null,
            bianli2:null,
            type:0,
            qiehuan:1,
            riman2:null
        }
    },
    methods:{
        huan(){
            this.type+=1
            if(this.type%2==0){
                this.bianli = this.homeman
            }else{
                this.bianli = this.homeman2
            }
            
        },
        qiehuan1(){
            this.qiehuan = 1
            this.bianli2 = this.riman
        },
        qiehuan2(){
            this.qiehuan = 2
            this.bianli2 = this.riman2
        }
    },
    created(){
        getHomeData().then((data)=>{
            this.homeman = data.homeman
            this.homeman2 = data.homeman2
            // console.log(this.homeman2)
            this.bianli = this.homeman
            this.riman2 = data.riman2
            this.riman = data.riman
            this.bianli2 = this.riman
        })
    }
}
</script>

<style lang="scss">
.home .riman{
    width: 100%;
    height: 50px;
    
    .header{
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        .left{
            width: 40%;
            display: flex;
            justify-content: space-between;
            margin-left: 5%;
            .one.con{
                font-weight: 600;
                color: red;
            }
            .two.con{
                font-weight: 600;
                color: red;
            }
        }
        .right{
            margin-right: 5%;
            font-size: 12px;
            color: #333;
        }
    }
    .body{
        width: 100%;
        background-color: #000;
        display: flex;
        flex-wrap: wrap;
        .item{
            width: 30%;
            margin-left: 3%;
            .imgs{
                width: 100%;
                height: 113px;
                overflow: hidden;
                img{
                    width: 100%;
                }
            }
            .yi{
                font-size: 16px;
                color: #fff;
            }
            .er{
                font-size: 12px;
                color: #fff;
            }
        }
    }
}
.home .foryou{
    width: 100%;
    margin: 0 auto;
    .h1{
        height: 30px;
        line-height: 30px;
        font-size: 18px;
        font-weight: bold;
        margin-left: 2%;
    }
    .body{
        width: 98%;
        margin-left: 2%;
        display: flex;
        flex-wrap:wrap ;
        .item{
            width: 30%;
            margin: 0 1%;
            .imgs{
                width: 100%;
                img{
                    width: 100%;
                }
            }
            .wenzi{
                width: 100%;
                height: 50px;
                display: flex;
                flex-direction: column;
                .one{
                    width: 100%;
                    height: 30px;
                    font-size: 14px;
                }
                .two{
                    width: 100%;
                    height: 20px;
                    font-size: 12px;
                    color: #999;
                }
            }
        }
    }
}
.home .header{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    .logo{
        width: 46px;
        height: 46px;
        margin-left: 4px;
        img{
            width: 100%;
        }
    }
    .inp{
        flex: 1;
        height: 30px;
        border-radius: 15px;
        background-color: #dfdfdf;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 10px;
        .fdj{
            width: 20px;
            height: 20px;
            img{
                width: 100%;
            }
        }
        .wenzi{
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            color: #000;
        }

    }
    .booklist{
        width: 60px;
        height: 36px;
        display: flex;
        align-items: center;
        .imgs{
            width: 20px;
            height: 20px;
            img{
                width: 100%;
            }
        }
        .wenzi{
            width: 30px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            font-size: 12px;
        }
    }
}
.home .tabs{
    width: 50%;
    margin: 0 auto 20px;
    height: 40px;
    line-height: 40px;
    display: flex;
    
    .faxian{
        margin: 0 15px;
        border-bottom: yellow solid 4px;
    }
    .tuijian{
        margin: 0 15px;
    }
    .shijie{
        margin: 0 15px;
    }
}
.home .banner{
    width: 94%;
    margin: 0 auto;
    .my-swipe{
        width: 100%;
        .item{
            width: 100%;
            img{
                width: 100%;
            }
        }
    }
}
.home .help{
    width: 90%;
    margin: 0 auto;
    display: flex;
    height: 60px;
    justify-content: center;
    align-items: center;
    .one{
        flex: 1;
        .imgs{
            width: 30px;
            height: 30px;
            margin-right: 8px;
            img{
                width: 100%;
            }
        }
    }
    .two{
        flex: 1;
        .imgs{
            width: 30px;
            height: 30px;
            margin-right: 8px;
            img{
                width: 100%;
            }
        }
    }
    .three{
        flex: 1;
        .imgs{
            width: 30px;
            height: 30px;
            margin-right: 8px;
            img{
                width: 100%;
            }
        }
    }
}
.home .help>div{
    display: flex;
    align-items: center;
    justify-content: center;
}
.home .cando{
    width: 90%;
    margin: 0 auto;
    height: 50px;
    display: flex;
    justify-content: space-around;
    .more{
        width: 47%;
        text-align: center;
        line-height: 40px;
        font-size: 12px;
        height: 40px;
        background-color: #dfdfdf;
    }
    .change{
        width: 47%;
        text-align: center;
        line-height: 40px;
        font-size: 12px;
        height: 40px;
        background-color: #dfdfdf;
    }
}




.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>